<template>
	<div class="p-2">
		<div class="py-2">
			<button @click="save" class="btn btn-primary">保存</button>
		</div>
		<div class="shadow radius">
			<div class="p-2 bg-shuilan text-white">
				<span>免责条款</span>
			</div>
			<div class="p-2">
				<div style="border: 1px solid #ccc;">
					<!-- 工具栏 -->
					<Toolbar style="border-bottom: 1px solid #ccc" :editor="mztk.editor"
						:defaultConfig="mztk.toolbarConfig" />
					<!-- 编辑器 -->
					<Editor style="height: 400px; overflow-y: hidden" :defaultConfig="mztk.editorConfig"
						v-model="mztk.html" @onChange="mztk.onChange" @onCreated="mztk.onCreated" />
				</div>
			</div>
		</div>



		<div class="shadow radius mt-3">
			<div class="p-2 bg-shuilan text-white">
				<span>开店指南</span>
			</div>
			<div class="p-2">
				<div style="border: 1px solid #ccc;">
					<!-- 工具栏 -->
					<Toolbar style="border-bottom: 1px solid #ccc" :editor="kdzn.editor"
						:defaultConfig="kdzn.toolbarConfig" />
					<!-- 编辑器 -->
					<Editor style="height: 400px; overflow-y: hidden" :defaultConfig="kdzn.editorConfig"
						v-model="kdzn.html" @onChange="kdzn.onChange" @onCreated="kdzn.onCreated" />
				</div>
			</div>
		</div>


		<div class="shadow radius mt-3">
			<div class="p-2 bg-shuilan text-white">
				<span>开店申请</span>
			</div>
			<div class="p-2">
				<div style="border: 1px solid #ccc;">
					<!-- 工具栏 -->
					<Toolbar style="border-bottom: 1px solid #ccc" :editor="kdsq.editor"
						:defaultConfig="kdsq.toolbarConfig" />
					<!-- 编辑器 -->
					<Editor style="height: 400px; overflow-y: hidden" :defaultConfig="kdsq.editorConfig"
						v-model="kdsq.html" @onChange="kdsq.onChange" @onCreated="kdsq.onCreated" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";

	export default {
		name: "MyEditor",
		components: {
			Editor,
			Toolbar
		},
		data: function() {
			return {
				setting: {
					setid: "1",
					mztk: "",
					kdzn: "",
					kdsq: ""
				},
				mztk: {
					editor: null,
					html: "",
					toolbarConfig: {},
					editorConfig: {
						placeholder: "请输入内容...",
						MENU_CONF: {},
					},
					onCreated: editor => {
						this.mztk.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
					},
					onChange: editor => {
						this.setting.mztk = editor.getHtml();
					},
				},

				kdzn: {
					editor: null,
					html: "",
					toolbarConfig: {},
					editorConfig: {
						placeholder: "请输入内容...",
						MENU_CONF: {},
					},
					onCreated: editor => {
						this.kdzn.editor = Object.seal(editor);
					},
					onChange: editor => {
						this.setting.kdzn = editor.getHtml();
					},
				},

				kdsq: {
					editor: null,
					html: "",
					toolbarConfig: {},
					editorConfig: {
						placeholder: "请输入内容...",
						MENU_CONF: {},
					},
					onCreated: editor => {
						this.kdsq.editor = Object.seal(editor);
					},
					onChange: editor => {
						this.setting.kdsq = editor.getHtml();
					},
				},

			};
		},
		methods: {
			save: function() {
				this.http.post({
					url: "/settings/xtsz/info",
					data: this.setting,
				}).then(response => {
					if (response.saveMsg) {
						this.message.info("保存成功");
					}
				});
			}
		},
		created: function() {
			this.http.get({
				url: "/settings/sm",
			}).then(data => {
				this.setting = data.xtsz;
				this.mztk.html = this.setting.mztk;
				this.kdzn.html = this.setting.kdzn;
				this.kdsq.html = this.setting.kdsq;
			});
		},
		beforeDestroy: function() {
			const mztkeditor = this.mztk.editor;
			if (mztkeditor) {

			} else {
				mztkeditor.destroy();
			}

			const kdzneditor = this.kdzn.editor;
			if (kdzneditor) {

			} else {
				kdzneditor.destroy();
			}

			const kdsqeditor = this.kdsq.editor;
			if (kdsqeditor) {

			} else {
				kdsqeditor.destroy();
			}
		}

	};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>